<template>
  <div style="padding: 15px">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px">
      <el-form-item label="车牌号" prop="licenseNumber" >
        <el-autocomplete
          v-model="form.licenseNumber"
          :fetch-suggestions="(queryString, cb)=>querySearchAsync(queryString, cb)"
          placeholder="请输入车牌号"
          :clearable="true"
          @select="handleSelect"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="挂车号" prop="trailerNum">
        <el-input v-model="form.trailerNum" placeholder="请输入挂车号" :disabled="true" />
      </el-form-item>
      <el-form-item label="交强险" prop="strongInsurance">
        <el-input type="number" v-model="form.strongInsurance" placeholder="请输入交强险" />
      </el-form-item>
      <el-form-item label="车辆损失险" prop="vehicleLossInsurance">
        <el-input type="number" v-model="form.vehicleLossInsurance" placeholder="请输入车辆损失险" />
      </el-form-item>
      <el-form-item label="第三者责任险" prop="thirdPartyLiabilityInsurance">
        <el-input type="number" v-model="form.thirdPartyLiabilityInsurance" placeholder="请输入第三者责任险" />
      </el-form-item>
      <el-form-item label="人员险" prop="personnelInsurance">
        <el-input type="number" v-model="form.personnelInsurance" placeholder="请输入人员险" />
      </el-form-item>
      <el-form-item label="不计免赔特约险" prop="nonDeductibleInsurance">
        <el-input type="number" v-model="form.nonDeductibleInsurance" placeholder="请输入不计免赔特约险" />
      </el-form-item>
      <el-form-item label="商业险到期日期" prop="commercialDueDate">
        <el-date-picker
          v-model="form.commercialDueDate"
          type="date"
          placeholder="请输入商业险到期日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="商业险保险公司" prop="commercialCompany">
        <el-input v-model="form.commercialCompany" placeholder="请输入商业险保险公司" />
      </el-form-item>
      <el-form-item label="车船税" prop="vehicleTax">
        <el-input type="number" v-model="form.vehicleTax" placeholder="请输入车船税" />
      </el-form-item>
      <el-form-item label="交强险到期日期" prop="compulsoryDueDate">
        <el-date-picker
          v-model="form.compulsoryDueDate"
          type="date"
          placeholder="请输入交强险到期日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="交强险投保公司" prop="compulsoryCompany">
        <el-input v-model="form.compulsoryCompany" placeholder="请输入交强险投保公司" />
      </el-form-item>
      <el-form-item label="责任险" prop="liabilityInsurance">
        <el-input type="number" v-model="form.liabilityInsurance" placeholder="请输入责任险" />
      </el-form-item>
      <el-form-item label="责任险到期日期" prop="liabilityDueDate">
        <el-date-picker
          v-model="form.liabilityDueDate"
          type="date"
          placeholder="请输入责任险到期日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="责任险投保公司" prop="liabilityCompany">
        <el-input v-model="form.liabilityCompany" placeholder="请输入责任险投保公司" />
      </el-form-item>
      <el-form-item label="合计金额" prop="insuranceAmount">
        <el-input :value="computedAmount" placeholder :disabled="true" />
      </el-form-item>
      <el-form-item>
        <el-button @click="funcCancel">取 消</el-button>
        <el-button type="primary" @click="funcSubmit">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import {
  vehicleInsuranceCode,
  updateVehicleInsurance
} from "@/api/vehicleService";
import { getSumMoney } from '@/utils/index.js'
Vue.use(VXETable);
export default {
  name: "vehicleInsuranceEdit",
  props: {
    restaurants: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      form: {},
      rules: {
        licenseNumber: [
          { required: true, message: "请输入车牌号", trigger: "change" }
        ],
        trailerNum: [
          { required: false, message: "请输入挂车号", trigger: "blur" }
        ],
        strongInsurance: [
          { required: true, message: "请输入交强险", trigger: "blur" }
        ],
        vehicleLossInsurance: [
          { required: true, message: "请输入车辆损失险", trigger: "blur" }
        ],
        thirdPartyLiabilityInsurance: [
          { required: true, message: "请输入第三者责任险", trigger: "blur" }
        ],
        nonDeductibleInsurance: [
          { required: true, message: "请输入不计免赔特约险", trigger: "blur" }
        ],
        insuranceAmount: [
          { required: false, message: "请输入合计金额", trigger: "blur" }
        ],
        personnelInsurance: [
          { required: true, message: "请输入人员险", trigger: "blur" }
        ],
        commercialDueDate: [
          { required: true, message: "请选择商业险到期日期", trigger: "blur" }
        ],
        commercialCompany: [
          { required: true, message: "请输入商业险保险公司", trigger: "blur" }
        ],
        vehicleTax: [
          { required: true, message: "请输入车船税", trigger: "blur" }
        ],
        compulsoryDueDate: [
          { required: true, message: "请选择交强险到期日期", trigger: "blur" }
        ],
        compulsoryCompany: [
          { required: true, message: "请输入交强险投保公司", trigger: "blur" }
        ],
        liabilityInsurance: [
          { required: true, message: "请输入责任险", trigger: "blur" }
        ],
        liabilityDueDate: [
          { required: true, message: "请选择责任险到期日期", trigger: "blur" }
        ],
        liabilityCompany: [
          { required: true, message: "请输入责任险投保公司", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    computedAmount() {
      const arr = [
        this.form.strongInsurance,
        this.form.vehicleLossInsurance,
        this.form.thirdPartyLiabilityInsurance,
        this.form.personnelInsurance,
        this.form.nonDeductibleInsurance,
        this.form.vehicleTax,
        this.form.liabilityInsurance
      ];
      return getSumMoney(arr);
    }
  },
  methods: {
    getInfo(code) {
      this.form = {}
      vehicleInsuranceCode(code).then(response => {
        this.form = response.data;
        this.form.code = code
      });
    },
    // 提交
    funcSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          this.form.insuranceAmount = this.computedAmount;
          updateVehicleInsurance(this.form)
            .then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: "success" });
              this.$emit("hideModel");
            })
        } else {
          return false;
        }
      });
    },
    // 模糊查询 车牌号
    querySearchAsync(queryString, cb) {
      var temArr1 = this.filterList(queryString);
      temArr1.forEach(item => {
        item.value = item.licenseNumber;
      });
      cb(temArr1);
    },
    // 筛选
    filterList(queryString) {
      var list = this.restaurants.filter(item => {
        if (item.licenseNumber) {
          return item.licenseNumber.indexOf(queryString) > -1;
        }
      });
      return list;
    },
    // 选中
    handleSelect(item) {
      this.form.vehicleCode = item.code;
      this.form.trailerNum = item.trailerNum;
    },
    // 取消
    funcCancel() {
      this.$emit("hideModel");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor {
  width: 100%;
}
.el-autocomplete {
  width: 100%;
}
</style>
